<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .container {
            width: 100%;
            padding-top: 5%;
        }
        .container .left {
            
            float: left;
            
        }
        .container .left img {
          
            animation: move 2s forwards; 

        }
        .container h2 {
            float: right;
            animation: xmove 2s forwards;

        }
        @keyframes xmove {
            0% {
                transform: translate(0, 0);
            }
            100% {
                transform: translate(-300px, 200px);
              }
        } 
        @keyframes move {
            0% {
                transform: translate(0, 0);
            }
            100% {
                transform: translate(300px, 0);
              }
        } 
        form {
            float: right;
            text-align: right;
            transform: translate(0, 300px);
        }
        form .text{
            width: 220px;
            height: 30px;
            font-size: 19px;
        }
        form .deng {
            width: 80px;
            height: 30px;
            background-color: #fff;
            border:1px solid #ccc;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left">
            <img src="images/raw_1529983906.png" alt="">
        </div>
        <div class="zhong">
            <h2>
                力学笃行 志存高远
            </h2>
        </div>
        <form action="">
            <input type="text" class="text" placeholder="用户名"><br><br>
            <input type="text"  class="text" placeholder="密码"><br><br>
            <input type="submit" value="登陆 " class="deng">

        </form>
    </div>
</body>
</html>